<!DOCTYPE html>
<html>
<head>
    <meta charset="gb2312">
    <title>栅格系统</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
</head>
<style>
    .a{
    height:50px;
    background:#eee;
    border:1px solid #ccc;
    }
</style>

<body>
<!--栅格系统，最多12列-->
<div class="container">
    <div class="row">
        <div class="col-md-1 a">1</div>
        <div class="col-md-1 a">2</div>
        <div class="col-md-1 a">3</div>
        <div class="col-md-1 a">4</div>
        <div class="col-md-1 a">5</div>
        <div class="col-md-1 a">6</div>
        <div class="col-md-1 a">7</div>
        <div class="col-md-1 a">8</div>
        <div class="col-md-1 a">9</div>
        <div class="col-md-1 a">10</div>
        <div class="col-md-1 a">11</div>
        <div class="col-md-1 a">12</div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-md-4 a">1-4</div>
        <div class="col-md-4 a">5-8</div>
        <div class="col-md-4 a">9-12</div>
    </div>
</div>
<!--栅格偏移-->
<div class="container">
<div class="row">
    <div class="col-md-7 a">8</div>
    <div class="col-md-3 col-md-offset-2 a">3</div>
</div>
</div>

<!--两个列交换位置,push向左移动，pull向右-->
<div class="container">
    <div class="row">
        <div class="col-md-9 col-md-push-3 a">9</div>
        <div class="col-md-3 col-md-pull-9 a">3</div>
    </div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
